{% render 'product-media-gallery', variant_images: variant_images %}
<!-- 自定义canvas功能区开始 -->
<div id="product-customizer-wrapper">
  <div style="margin-bottom: 1em;">
    <label>上传图片：<input type="file" id="img-upload" accept="image/*"></label>
    <label style="margin-left:1em;">输入文字：<input type="text" id="text-input" placeholder="输入文字"></label>
  </div>
  <canvas id="main-canvas" style="border:1px solid #eee;max-width:100%;height:auto;"></canvas>
</div>

<script>
(function() {
  // 获取主图和变体图
  var productImages = [
    {% if product.featured_image %}'{{ product.featured_image | img_url: 'master' }}',{% endif %}
    {% for variant in product.variants %}
      {% if variant.featured_image %}'{{ variant.featured_image | img_url: 'master' }}',{% endif %}
    {% endfor %}
  ];
  if (productImages.length === 0) return;

  var currentImageIndex = 0;
  var canvas = document.getElementById('main-canvas');
  var ctx = canvas.getContext('2d');
  var mainImg = new window.Image();
  var uploadedImg = null;
  var uploadedImgPos = { x: 0, y: 0 };
  var uploadedImgDragging = false;
  var uploadedImgOffset = { x: 0, y: 0 };
  var text = '';
  var textPos = { x: 0, y: 0 };
  var textDragging = false;
  var textOffset = { x: 0, y: 0 };
  var fontSize = 32;
  var fontFamily = 'Arial';

  // 加载主图
  function loadMainImage(idx) {
    mainImg.src = productImages[idx];
    mainImg.onload = function() {
      canvas.width = mainImg.width;
      canvas.height = mainImg.height;
      // 居中图片和文字
      uploadedImgPos = { x: mainImg.width/2, y: mainImg.height/2 };
      textPos = { x: mainImg.width/2, y: mainImg.height/2 };
      drawAll();
    };
  }

  // 绘制所有内容
  function drawAll() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(mainImg, 0, 0, canvas.width, canvas.height);
    if (uploadedImg) {
      var x = uploadedImgPos.x - uploadedImg.width/2;
      var y = uploadedImgPos.y - uploadedImg.height/2;
      ctx.drawImage(uploadedImg, x, y);
    }
    if (text) {
      ctx.font = fontSize + 'px ' + fontFamily;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillStyle = '#222';
      ctx.strokeStyle = '#fff';
      ctx.lineWidth = 2;
      ctx.strokeText(text, textPos.x, textPos.y);
      ctx.fillText(text, textPos.x, textPos.y);
    }
  }

  // 变体切换（如有多个图片）
  if (productImages.length > 1) {
    var btns = document.createElement('div');
    btns.style.marginBottom = '1em';
    productImages.forEach(function(img, idx) {
      var b = document.createElement('button');
      b.textContent = '图片' + (idx+1);
      b.onclick = function() {
        currentImageIndex = idx;
        loadMainImage(idx);
      };
      btns.appendChild(b);
    });
    document.getElementById('product-customizer-wrapper').insertBefore(btns, canvas);
  }

  // 上传图片
  document.getElementById('img-upload').addEventListener('change', function(e) {
    var file = e.target.files[0];
    if (!file) return;
    var reader = new FileReader();
    reader.onload = function(evt) {
      uploadedImg = new window.Image();
      uploadedImg.onload = function() {
        // 居中
        uploadedImgPos = { x: canvas.width/2, y: canvas.height/2 };
        drawAll();
      };
      uploadedImg.src = evt.target.result;
    };
    reader.readAsDataURL(file);
  });

  // 输入文字
  document.getElementById('text-input').addEventListener('input', function(e) {
    text = e.target.value;
    // 居中
    textPos = { x: canvas.width/2, y: canvas.height/2 };
    drawAll();
  });

  // 拖动逻辑
  var dragTarget = null;
  canvas.addEventListener('mousedown', function(e) {
    var rect = canvas.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
    // 判断点在图片上
    if (uploadedImg) {
      var imgX = uploadedImgPos.x - uploadedImg.width/2;
      var imgY = uploadedImgPos.y - uploadedImg.height/2;
      if (x >= imgX && x <= imgX + uploadedImg.width && y >= imgY && y <= imgY + uploadedImg.height) {
        dragTarget = 'img';
        uploadedImgDragging = true;
        uploadedImgOffset = { x: x - uploadedImgPos.x, y: y - uploadedImgPos.y };
        return;
      }
    }
    // 判断点在文字上
    if (text) {
      ctx.font = fontSize + 'px ' + fontFamily;
      var textWidth = ctx.measureText(text).width;
      var textHeight = fontSize;
      var tx = textPos.x - textWidth/2;
      var ty = textPos.y - textHeight/2;
      if (x >= tx && x <= tx + textWidth && y >= ty && y <= ty + textHeight) {
        dragTarget = 'text';
        textDragging = true;
        textOffset = { x: x - textPos.x, y: y - textPos.y };
        return;
      }
    }
  });
  canvas.addEventListener('mousemove', function(e) {
    if (!dragTarget) return;
    var rect = canvas.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
    if (dragTarget === 'img' && uploadedImgDragging) {
      uploadedImgPos.x = x - uploadedImgOffset.x;
      uploadedImgPos.y = y - uploadedImgOffset.y;
      drawAll();
    } else if (dragTarget === 'text' && textDragging) {
      textPos.x = x - textOffset.x;
      textPos.y = y - textOffset.y;
      drawAll();
    }
  });
  canvas.addEventListener('mouseup', function() {
    dragTarget = null;
    uploadedImgDragging = false;
    textDragging = false;
  });
  canvas.addEventListener('mouseleave', function() {
    dragTarget = null;
    uploadedImgDragging = false;
    textDragging = false;
  });

  // 初始化加载主图
  loadMainImage(currentImageIndex);
})();
</script>
<!-- 自定义canvas功能区结束 --> 